<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jquery -->
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <script>
        // $('div').hide(); // 隐藏div盒子
        // 如果script写在html的上方，有两种解决方法
        //  方法一： 等页面DOM加载完成在执行js代码
        // $(document).ready(function () {
        //     $('div').hide();
        // })

        // 方法二： 等页面DOM加载完成在执行js代码
        $(function () {
            $('div').hide();
        })


        // jQuery对象 与 DOM对象 的区别
        // 1. DOM对象： 通过原生JS获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv是DOM对象
        console.dir(myDiv);
        // 2. jQuery对象: 用jQuery方式获取过来的对象是jQuery对象。 本质： 通过$把DOM元素进行包装
        $('div'); // $('div');是一个jQuery对象
        console.dir($('div'))
        // 3. jQuery对象只能使用 jQuery 方法， DOM对象则使用原生的JavaScript属性和方法  不能混用


        //   DOM对象 与 jQuery对象 之间相互转换
        // 1. DOM对象 转换为 jQuery对象
        // （1）. 直接获取， 得到jQuery
        $('div');
        // （2）. 我们已经使用原生js 获取过来 DOM对象
        $(myDiv);

        // 2. jQuery对象 转换为 DOM对象 
        // $('div')[0].animate   // 采用数组的方式调用
        // $('div').get(0).animate 
    </script>
    <div></div>
    
</body>
</html>